import { AppstoreOutlined, ContainerOutlined, DesktopOutlined, MailOutlined, MenuFoldOutlined, MenuUnfoldOutlined, PieChartOutlined } from "@ant-design/icons"
import { Button, Menu } from "antd"
import { useState } from "react"
import { useLocation, useParams, useNavigate } from "react-router-dom"
import "./Nav.scss"

const items = [
    { key: "/", icon: <PieChartOutlined />, label: "首页" },
    { key: "changjing", icon: <DesktopOutlined />, label: "场景案例" },
    {
        key: "demo",
        icon: <ContainerOutlined />,
        label: "React用法",
        children: [
            { key: "/demo1", label: "基础组件" },
            { key: "/demo2", label: "数据声明" },
            { key: "/demo3", label: "数据监听" },
            { key: "/demo4", label: "组件通信" },
            { key: "/demo5", label: "Redux使用" },
            { key: "/demo6", label: "React路由" },
            { key: "/demo7", label: "React插槽" },
            { key: "/demo8", label: "React常用Hooks" },
            { key: "/demo9", label: "组件封装" },
            { key: "/demo10", label: "递归组件" },
            { key: "/demo11", label: "axios使用" },
            { key: "/demo12", label: "组件渲染" },
        ],
    },
]
const Nav = () => {
    const [collapsed, setCollapsed] = useState(false) // 是否折叠  默认不折叠
    const toggleCollapsed = () => {
        setCollapsed(!collapsed)
    }
    const navigate = useNavigate() // 获取路由跳转方法
    const { pathname } = useLocation() // 获取当前路由地址
    
    // 菜单点击事件
    const onClick = (e) => {
        navigate(e.key)
    }

    // 展开/收起子菜单
    const onOpenChange = (keys) => {
        console.log("open keys", keys)
    }

    return (
        <div className={`Nav_container ${collapsed ? "" : "Nav_collapsed"}`}>
            <Button type="primary" onClick={toggleCollapsed} className="Nav_toggle">
                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </Button>
            {/* 
                defaultOpenKeys       默认展开的 SubMenu 菜单项 key 数组
                selectedKeys          当前选中的菜单项 key 数组
                inlineCollapsed       inline 时菜单是否收起状态
                items                 菜单的配置项
            */}
            <Menu defaultOpenKeys={[pathname]} selectedKeys={[pathname]} mode="inline" theme="dark" inlineCollapsed={collapsed} items={items} onClick={onClick} />
        </div>
    )
}
export default Nav
